<script setup lang="ts">
// 生意参谋 市场 市场大盘 行业构成 子行业构成

import {message} from "ant-design-vue";
import {getCurrentInstance} from "vue";
import EChart from "~/contentScripts/views/echart.vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";
import Trans from "~/utils/sycm/trans";

const visible = ref(false);
const loginVisible = ref(false);
const dataSource = ref<any[]>([]);
const chartOptions = ref<any>({
  tooltip: {
    formatter: function (info) {
      return info.data.name + '<br/>' + '汇总交易金额：' + info.data.amount + '(' + (info.data.value * 100).toFixed(2) + '%)';
    }
  },
  series: [],
});
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    let data = await SYCM.getInternalFiberData('#sycm-mc-mq-cate-constitute > div.oui-card-content', 'memoizedProps.children._owner.memoizedProps.tableData');
    let parentCateName = document.querySelector("[id^=__qiankun_microapp_wrapper_for_op_mc] > div > div > div > div > div.ebase-FaCommonFilter-module__root  div.ebase-FaCommonFilter-module__top > div.ebase-FaCommonFilter-module__left  a.common-picker-header")?.getAttribute('title');
    if (typeof data.data === 'undefined' || data.data.length == 0) {
      message.error('获取数据失败,请稍后重试');
      return false;
    }
    data.data.map((item) => {
      item.parentCate = {
        cateName: parentCateName,
      };
      item.tradeIndex_tran = Trans.number(item.tradeIndex.value);
      item.parentTradeIndex_tran = parseInt((item.tradeIndex_tran / item.payAmtParentCateRateIndex.value).toFixed(2));
      item.date = data.params.dateRange.split('|').join('~');
    });
    chartOptions.value.series = [
      {
        name: parentCateName,
        type: 'treemap',
        data: data.data.map((item) => {
          return {
            name: item.cateBo.cateName,
            value: item.payAmtParentCateRateIndex.value,
            amount: item.tradeIndex_tran,
          }
        }),
      }
    ];
    // console.log(JSON.stringify(chartOptions.value));
    dataSource.value = data.data;
    visible.value = true;
  }
}
const columns = [
  {
    dataIndex: 'cateBo.cateName',
    title: '子行业类目',
    width: 180,
    tooltip: true,
  },
  {
    dataIndex: 'parentCate.cateName',
    title: '父行业类目',
    width: 240,
    tooltip: true,
  },
  {
    dataIndex: 'date',
    title: '日期',
    width: 220,
    tooltip: true,
    sorter: (a, b) => a.date.localeCompare(b.date),
  },
  {
    dataIndex: 'tradeIndex_tran',
    title: '交易金额',
    align: 'center',
    sorter: (a, b) => a.tradeIndex_tran - b.tradeIndex_tran,
    dataType: 'customRender',
    render: (text, row, index) => {
      // 金额格式化 每隔三位 给金额增加一个英文逗号
      return text.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
    }
  },
  {
    dataIndex: 'parentTradeIndex_tran',
    title: '父行业交易金额',
    align: 'center',
    sorter: (a, b) => a.parentTradeIndex_tran - b.parentTradeIndex_tran,
    dataType: 'customRender',
    render: (text, row, index) => {
      // 金额格式化 每隔三位 给金额增加一个英文逗号
      return text.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
    }
  },
  {
    dataIndex: 'tradeGrowthRangeIndex.value',
    title: "交易幅度增长指数",
    dataType: 'custom',
    slot: 'tradeGrowthRangeIndex',
    align: 'center',
    sorter: (a, b) => a.tradeGrowthRangeIndex.value - b.tradeGrowthRangeIndex.value,
  },
  {
    dataIndex: 'payAmtParentCateRateIndex.value',
    title: "支付金额较父行业占比",
    dataType: 'custom',
    slot: 'payAmtParentCateRateIndex',
    align: 'center',
    sorter: (a, b) => a.payAmtParentCateRateIndex.value - b.payAmtParentCateRateIndex.value,
  },
  {
    dataIndex: 'payCntParentCateRate.value',
    title: "支付订单数较父行业占比",
    dataType: 'custom',
    slot: 'payCntParentCateRate',
    align: 'center',
    sorter: (a, b) => a.payCntParentCateRate.value - b.payCntParentCateRate.value,
  }
];
</script>

<template>
  <base-app>
    <a-button-group>
      <user :style="{
      marginRight:0
    }"
      />
      <a-button size="small" type="primary" @click="handle">一键转化</a-button>
    </a-button-group>
    <custom-modal title="市场大盘-行业构成-子行业" v-model:visible="visible" :footer="false" width="95%"
                  style="top: 20px;"
    >
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
      </template>
      <div style="max-height: calc(100vh - 150px);overflow-y: auto">
        <EChart :options="chartOptions" style="height: 280px;margin-top: -10px;"/>
        <a-divider/>
        <base-table size="small" table-name="市场大盘-行业构成-子行业" :data-source="dataSource" :columns="columns">
          <template #tradeGrowthRangeIndex="row">
          <span v-if="row.tradeGrowthRangeIndex.value>0" style="color: #1890ff"
          >+{{ (row.tradeGrowthRangeIndex.value * 100).toFixed(2) }}%</span>
            <span v-else-if="row.tradeGrowthRangeIndex.value<0" style="color: #ff4d4f"
            >{{ (row.tradeGrowthRangeIndex.value * 100).toFixed(2) }}%</span>
          </template>
          <template #payAmtParentCateRateIndex="row">
            <div>
              {{ (row.payAmtParentCateRateIndex.value * 100).toFixed(2) }}%
            </div>
            <div style="font-size: 12px;">
            <span v-if="row.payAmtParentCateRateIndex.cycleCqc>0" style="color: #1890ff"
            >+{{ (row.payAmtParentCateRateIndex.cycleCqc * 100).toFixed(2) }}%</span>
              <span v-else-if="row.payAmtParentCateRateIndex.cycleCqc<0" style="color: #ff4d4f"
              >{{ (row.payAmtParentCateRateIndex.cycleCqc * 100).toFixed(2) }}%</span>
            </div>
          </template>
          <template #payCntParentCateRate="row">
            <div>
              {{ (row.payCntParentCateRate.value * 100).toFixed(2) }}%
            </div>
            <div style="font-size: 12px;">
            <span v-if="row.payCntParentCateRate.cycleCqc>0" style="color: #1890ff"
            >+{{ (row.payCntParentCateRate.cycleCqc * 100).toFixed(2) }}%</span>
              <span v-else-if="row.payCntParentCateRate.cycleCqc<0" style="color: #ff4d4f"
              >{{ (row.payCntParentCateRate.cycleCqc * 100).toFixed(2) }}%</span>
            </div>
          </template>
        </base-table>
      </div>

    </custom-modal>
    <user-login-modal :login-visible="loginVisible" @close="loginVisible=false"/>
  </base-app>
</template>

<style scoped>

</style>
